<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 

	
	<ui:composition template="/templates/template-menu.xhtml">
		
		<ui:define name="scripts">
		
			<script type="text/javascript">

				function submeter(formId){
					jQuery("#"+formId).submit(function(){

						var cpfFormatado = jQuery("#cpf-funcionario").val().replace(".","").replace(".","").replace("-","");

						if(cpfFormatado != ""){

							jQuery("#cpf-funcionario").val(cpfFormatado);
							
						}

						var cepFormatado = jQuery("#cep-funcionario").val().replace("-","");
						
						if(cepFormatado != ""){

							jQuery("#cep-funcionario").val(cepFormatado);
							
						}

						var telefoneFormatado = jQuery("#tel1-funcionario").val().replace("(","").replace(")","").replace(" ","").replace("-","");
						
						if(telefoneFormatado != ""){

							jQuery("#tel1-funcionario").val(telefoneFormatado);
							
						}

						var celularFormatado = jQuery("#tel2-funcionario").val().replace("(","").replace(")","").replace(" ","").replace("-","");
						
						if(celularFormatado != ""){

							jQuery("#tel2-funcionario").val(celularFormatado);
							
						}

					});
				}
				
				function inibir(){
					jQuery("#id-funcionario").bind("keypress",function(e){
						e.preventDefault();
					});
				}

			</script>
	
			<style type="text/css">
			
				.rich-messages-label {
				
					font-weight: bold;
				
				}
			
			</style>
		
		</ui:define>
		
		<ui:define name="body">
		
			<rich:panel style="800px;">

			<f:facet name="header">
				<h:outputLabel value="Colaboradores" style="FONT-SIZE: small; FONT-FAMILY: 'SansSerif';"/>
			</f:facet>

			<h:form id="formulario-dados" prependId="false">

			<h:panelGrid columns="1" style="width:100%;">
			
				<rich:panel >
					
					<f:facet name="header">
		
						<h:outputLabel value="Dados pessoais" style="FONT-SIZE: small; FONT-FAMILY: 'SansSerif';"/>
		
					</f:facet>
		
					<h:panelGrid columns="4">
						
						<h:outputLabel value="Id:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
						
						<h:inputText id="id-funcionario" value="#{funcionarioController.funcionario.idFuncionario}" style="width:50px;" />
						<rich:spacer width="20px"/>
						<h:outputText value="*Obs.: O Id será gerado de forma automática no caso de novos cadastros." style="FONT-WEIGHT: bold; FONT-SIZE: x-small; COLOR: #c0c0c0; FONT-FAMILY: 'SansSerif';"/>
						
					</h:panelGrid>
					
					<rich:spacer height="15px"/>
					<rich:separator width="100%"/>
					<rich:spacer height="15px"/>
					
					<h:panelGrid columns="16">
					
						<h:outputLabel value="CPF:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
						
						<h:inputText id="cpf-funcionario" value="#{funcionarioController.funcionario.cpf}" style="width:80px;">
				
							<rich:jQuery query="mask('999.999.999-99');" selector="#cpf-funcionario" timing="onload"/>
							
						</h:inputText>
						
						<rich:spacer width="10px"/>
	
						<h:outputLabel value="Nome:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
						
						<h:inputText id="nome-funcionario" style="width:270px;" onkeypress="this.style.textTransform = 'uppercase';" value="#{funcionarioController.funcionario.nome}" />
						
						<rich:spacer width="10px"/>
						
						<h:outputLabel value="Data de nascimento:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
		        		
		        		<rich:calendar style="width:40px;" value="#{funcionarioController.funcionario.nasc}" datePattern="dd/MM/yyyy">
	      	   		 	 
	      	   		 	  <f:convertDateTime id="padraoDataNascimento" pattern="dd/MM/yyyy"/>
	      	   		 	 
	      	   		 	</rich:calendar>
	      	   		 	
	      	   		 	<rich:spacer width="10px"/>
				
						<h:outputLabel value="Departamento:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
					
						<h:selectOneMenu id="departamento-funcionario" value="#{funcionarioController.funcionario.departamento}">
            		
            				<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
            		
            		       	<f:selectItems value="#{departamentoController.listaDepartamento}" />
               		
               			</h:selectOneMenu>
               			
               			<rich:spacer width="10px"/>
               			
               			<h:outputLabel value="Cargo: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
						<h:selectOneMenu id="cargo-funcionario" value="#{funcionarioController.funcionario.cargo}" >
       		    
       		            	<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
       		    
       		            	<f:selectItems value="#{cargoController.listaCargo}" />
       	   		
       	   		     	</h:selectOneMenu>
               			
               			</h:panelGrid>
               			
               			<h:panelGrid columns="6">
               	
               	        <h:outputLabel value="Número de documento:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
						<h:inputText id="doc-funcionario" value="#{funcionarioController.funcionario.doc}" />
				
						<h:outputLabel value="Tipo de documento: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
						<h:selectOneMenu id="tipo-doc-funcionario" value="#{funcionarioController.funcionario.tipoDoc}">
           		
           					<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
           		
           					<f:selectItem itemLabel="RG" itemValue="RG"/>
           		
           					<f:selectItem itemLabel="Carteira de habilitação" itemValue="Carteira de habilitação"/>
         		
         					<f:selectItem itemLabel="Titulo de eleitor" itemValue="Titulo de eleitor"/>
         		
         					<f:selectItem itemLabel="Carteira profissional" itemValue="Carteira profissional"/>
		        
		        		</h:selectOneMenu>
				
						<h:outputLabel value="Data de admissão: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
		   		
		   			    <rich:calendar value="#{funcionarioController.funcionario.admissao}" datePattern="dd/MM/yyyy">
	      	   	
	      	   		 	  <f:convertDateTime id="padraoDataAdmissao" pattern="dd/MM/yyyy"/>
	      	   	
	      	   		 	</rich:calendar>
	           	 
	        		    <h:outputLabel value="Status: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
						<h:selectOneMenu id="status-funcionario" value="#{funcionarioController.funcionario.status}">
           		
           					<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
           		
           					<f:selectItem itemLabel="Ativo" itemValue="Ativo"/>
           		
           					<f:selectItem itemLabel="Desligado" itemValue="Desligado"/>
         		
         					<f:selectItem itemLabel="Férias" itemValue="Férias"/>
         		
         					<f:selectItem itemLabel="Ausente (Motivos pessoais)" itemValue="Ausente (Motivos pessoais)"/>
         		
         					<f:selectItem itemLabel="Outro" itemValue="Outro"/>
 		       	
 		       			</h:selectOneMenu>
				
						<h:outputLabel value="Cargo Supervisor: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
						<h:selectOneMenu id="cargo-supervisor-funcionario" value="#{funcionarioController.funcionario.supervFuncao}" >
       		 	
       		 	           	<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
       	    	
       	    	 	       	<f:selectItems value="#{cargoController.listaCargo}" />
            	
            	 	  	</h:selectOneMenu>
				
						<h:outputLabel value="Nome do Supervisor:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
						<h:inputText id="nome-supervisor-funcionario" onkeypress="this.style.textTransform = 'uppercase';" value="#{funcionarioController.funcionario.supervNome}" />
        		
        			</h:panelGrid>        		
        		
        		</rich:panel>
        		
        		<rich:spacer width="100%" height="10px"></rich:spacer>
        		
        		<rich:panel>
        			
        			<f:facet name="header">
					
						<h:outputLabel value="Localização e Contatos" />

				</f:facet>
				
				<h:panelGrid columns="6">
				
				<h:outputLabel value="Logradouro:" style="FONT-FAMILY: 'SansSerif'; FONT-SIZE: medium;"/>

				<h:inputText id="logradouro-funcionario" onkeypress="this.style.textTransform = 'uppercase';" value="#{funcionarioController.funcionario.logradouro}" />
				
				<h:outputLabel value="Número:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>

				<h:inputText id="numero-funcionario" value="#{funcionarioController.funcionario.numero}" />
				
				<h:outputLabel value="Complemento: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>

				<h:inputText id="complemento-funcionario" onkeypress="this.style.textTransform = 'uppercase';" value="#{funcionarioController.funcionario.complemento}" />
				
				<h:outputLabel value="Bairro: " style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>

				<h:inputText id="bairro-funcionario" onkeypress="this.style.textTransform = 'uppercase';" value="#{funcionarioController.funcionario.bairro}" />
				
				<h:outputLabel value="UF:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
				<a4j:region>
					
					<h:selectOneMenu id="uf-funcionario" value="#{funcionarioController.funcionario.uf}" onchange="submeter('formulario-dados');listarCidades();" >
								
						<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
								
							<a4j:jsFunction name="listarCidades" actionListener="#{cidadeController.listarCidadesPorUf}" reRender="cidade-funcionario" process="cidade-funcionario" />
									
								<f:selectItems value="#{estadoController.listaEstado}" />
								
					</h:selectOneMenu>
					
				</a4j:region>
							
				<h:outputLabel value="Cidade:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
							
					<h:selectOneMenu id="cidade-funcionario" value="#{funcionarioController.funcionario.cidade}">
								
						<f:selectItem itemValue="#{0}" itemLabel="Selecione..." />
								
						<f:selectItems value="#{cidadeController.listaCidade}" />
								
				</h:selectOneMenu>
               	
               	<h:outputLabel value="CEP:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
			
				<h:inputText id="cep-funcionario" value="#{funcionarioController.funcionario.cep}" >
					
					<rich:jQuery query="mask('99999-999');" selector="#cep-funcionario" timing="onload"/>
					
				</h:inputText>
	            
	            <h:outputLabel value="Telefone:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
				<h:inputText id="tel1-funcionario" value="#{funcionarioController.funcionario.tel1}" >
					
					<rich:jQuery query="mask('(99) 9999-9999');" selector="#tel1-funcionario" timing="onload"/>
					
				</h:inputText>
					
				<h:outputLabel value="Celular:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
				<h:inputText id="tel2-funcionario" value="#{funcionarioController.funcionario.tel2}" >
					
					<rich:jQuery query="mask('(99) 9999-9999');" selector="#tel2-funcionario" timing="onload"/>
					
				</h:inputText>
					
				<h:outputLabel value="E-mail:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				
				<h:inputText id="email-funcionario" onkeypress="this.style.textTransform = 'lowercase';" value="#{funcionarioController.funcionario.email}" />
        		
        	</h:panelGrid>
        		
        </rich:panel>
        
        <rich:spacer width="100%" height="10px"></rich:spacer>
        		
       <rich:panel>
        			<f:facet name="header">
        				<h:outputLabel value="Acesso ao SisTelecom" />
        			</f:facet>
        			<h:panelGrid columns="2">
        			
        			<h:outputLabel value="Login SisTelecom:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				<h:inputText id="login-funcionario" value="#{funcionarioController.funcionario.login}" title="Digite seu login em caixa baixa"/>
				
				<h:outputLabel value="Senha SisTelecom:" style="FONT-SIZE: medium; FONT-FAMILY: 'SansSerif';"/>
				<h:inputSecret id="password-funcionario" value="#{funcionarioController.funcionario.password}" redisplay="true"/>
				</h:panelGrid>
				</rich:panel>
			</h:panelGrid>

			<rich:spacer width="100%" height="10px" />

			<h:commandButton value="Salvar"
				actionListener="#{funcionarioController.salvar}"  onclick="submeter('formulario-dados');"/>
				
			<rich:messages>
			
				<f:facet name="errorMarker">
				 
           			<h:graphicImage url="/imagens/error.png"/>

	    		</f:facet>

     			<f:facet name="infoMarker">
		        
		            <h:graphicImage url="/imagens/ok.png"/>
			    
			    </f:facet>
			    
			    <f:facet name="warnMarker">
           		
           			<h:graphicImage url="/imagens/alerta.png"/>
    			
    			</f:facet>
    			
			</rich:messages>

		</h:form>

		<rich:spacer width="100%" height="10px" />

		<rich:separator width="100%" height="10px;" />

		<rich:spacer width="100%" height="10px" />

		<a4j:form id="formulario-tabela" prependId="false" >
			<rich:dataTable id="tabela" value="#{funcionarioController.lista}"
				var="funcionario" style="width:100%;">
	
					<rich:column width="50">
						<div id="div-id" align="center">
							<f:facet name="header">
								<h:outputLabel value="ID" />
							</f:facet>
	
							<h:outputLabel value="#{funcionario.id}" />
						</div>
					</rich:column>
	
					<rich:column width="80">
						<div id="div-nome" align="center">
							<f:facet name="header">
								<h:outputLabel value="CPF" />
							</f:facet>
	
							<h:outputLabel value="#{funcionario.cpf}" />
						</div>
					</rich:column>
					
					<rich:column width="150">
						<div id="div-tipo" align="center">
							<f:facet name="header">
								<h:outputLabel value="Departamento" />
							</f:facet>
	
							<h:outputLabel value="#{funcionario.nomeDepartamento}" />
						</div>
					</rich:column>
					
					<rich:column width="312">
						<div id="div-nome" align="center">
							<f:facet name="header">
								<h:outputLabel value="Nome" />
							</f:facet>
	
							<h:outputLabel value="#{funcionario.nome}" />
						</div>
					</rich:column>
									
					<rich:column width="50">
	
						<f:facet name="header">
							<h:outputLabel value="Alterar" />
						</f:facet>
						
						<div align="center">
						
							<h:panelGrid columns="3">
						
								<h:commandButton value="Alterar" image="/imagens/editar.png"
										actionListener="#{funcionarioController.carregarRegistro}">
									
										<a4j:actionparam name="id" value="#{funcionario.id}" />
									
									</h:commandButton>
							
								<rich:spacer width="10px"/>
							
								<a4j:commandButton value="Excluir" image="/imagens/delete.png"
									actionListener="#{funcionarioController.excluirRegistro}"
									reRender="formulario-tabela,formulario-dados"
									process="formulario-tabela,formulario-dados">
									
									<a4j:actionparam name="id" value="#{funcionario.id}" />
									
								</a4j:commandButton>
							</h:panelGrid>
						</div>
						
					</rich:column>
	
				</rich:dataTable>
			</a4j:form>
		</rich:panel>
	</ui:define>
</ui:composition>
</html>